<template>
  <div class="category-main">
    <a v-for="(item, index) in categoryItem"
       :key="index"
       :href="item.link"
       class="category-item">
      <img :src="item.image" alt="">
      <p>{{item.title}}</p>
    </a>
  </div>
</template>

<script>
import {getSubcategory} from "@/network/category";

export default {
  name: "CategoryMain",
  data() {
    return {
      categoryItem: [],
      currentType: 3627
    }
  },
  methods: {
    setCategoryItem() {
      getSubcategory(this.currentType).then(info => {
        console.log(info);
        this.categoryItem = info.data.list;
      })
    }
  },
  watch: {
    currentType: function () {
      this.setCategoryItem();
    }
  },
  created() {
    this.setCategoryItem();
  },
}
</script>

<style scoped lang="less">
  .category-main {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    padding-left: 6px;
  }
  .category-item {
    text-align: center;
    padding: 10px;
    img {
      width: 64px;
      height: 64px;
    }
    p {
      font-size: 12px;
      margin-top: 5px;
    }
  }
</style>